<script setup lang="ts">
import api from '@/api'
import {onLoad} from "@dcloudio/uni-app";
import {nextTick,reactive, ref, toRefs } from "vue";
import GoodItem from "./GoodItem.vue";
import ShopDetail from "./ShopDetail.vue";

const data = reactive({
  scrollTop: 0, //tab标题的滚动条位置
  oldScrollTop: 0,
  current: 0, // 预设当前项的值
  menuHeight: 0, // 左边菜单的高度
  menuItemHeight: 0, // 左边菜单item的高度
  itemId: "", // 栏目右边scroll-view用于滚动的id
  //tabbar: classifyData,
  menuItemPos: [],
  arr: [],
  scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
  timer: null, // 定时器
  cart: [],
  cartPopupVisible: false,
  goodDetailModalVisible: false,
  store: {},
  goodsInfo: {}, // 商品详情-用于选规格弹窗
  address: {},
});
const {
  scrollTop,
  oldScrollTop,
  current,
  menuHeight,
  menuItemHeight,
  itemId,
  menuItemPos,
  arr,
  scrollRightTop,
  timer,
  goodsInfo,
  address,
  store,
  goodDetailModalVisible,
} = toRefs(data);
const tabbar = ref([]);
const ads = ref([
  {
    image:
        "https://images.qmai.cn/s23107/2020/05/08/c25de6ef72d2890630.png?imageView2/2/w/600/h/600",
  },
  {
    image:
        "https://images.qmai.cn/s23107/2020/04/30/b3af19e0de8ed42f61.jpg?imageView2/2/w/600/h/600",
  },
  {
    image:
        "https://img-shop.qmimg.cn/s23107/2020/04/17/8aeb78516d63864420.jpg?imageView2/2/w/600/h/600",
  },
]);


const getCateGoods = async ()=>{
  const {data} = await api.diancan.getCateGoodsApi();
  tabbar.value = data.list;
  console.log(data)
}

const showGoodDetailModal = (item: any) => {
  goodsInfo.value = JSON.parse(JSON.stringify({ ...item, number: 1 }));
  //category.value = JSON.parse(JSON.stringify(item))
  goodDetailModalVisible.value = true;
};

const closeGoodDetailModal = () => {
  //关闭饮品详情模态框
  goodDetailModalVisible.value = false;
  //category.value = {}
  goodsInfo.value = {};
};

const handleAddToCartInModal =async (e) => {
  const res =await api.cart.updateApi(e)
  if(res.code === 1){
    closeGoodDetailModal();
    // 父组件刷新购物车
    reCart()
  }
};
const handleAddToCart = async (goods) => {
  const e = {
    goods_id: goods.id,
    goods_sku_price_id: goods.sku_prices[0].id,
    goods_num: 1,
    type:'inc'
  }
  const res = await api.cart.updateApi(e)
  if(res.code === 1){
    // 父组件刷新购物车
    reCart()
  }
};
const handleReduceFromCart = async (goods) => {
  if(goods.goods_num === 1){
    const e = {
      cart_ids: goods.id,
    }
    const res = await api.cart.delApi(e)
    if(res.code === 1){
      // 父组件刷新购物车
      reCart()
    }
  }else{
    const e = {
      goods_id: goods.id,
      goods_sku_price_id: goods.sku_prices[0].id,
      goods_num: 1,
      type:'dec'
    }
    const res = await api.cart.updateApi(e)
    if(res.code === 1){
      // 父组件刷新购物车
      reCart()
    }
  }
}

const emit = defineEmits(['reCart']);
const reCart = () => {
  //这里重新获取了商品列表，后期再优化
  getCateGoods()
  emit('reCart');
}

onLoad(()=>{
  getCateGoods()
})

// 点击左边的栏目切换
const swichMenu = async (index) => {
  console.log("点击左边的栏目切换", index, current.value);
  if (arr.value.length == 0) {
    await getMenuItemTop();
  }
  if (index == current.value) return;
  scrollRightTop.value = oldScrollTop.value;
  await nextTick(function() {
    scrollRightTop.value = arr.value[index];
    current.value = index;
    leftMenuStatus(index);
    console.log("scrollRightTop.", scrollRightTop.value);

  });
};
// 获取一个目标元素的高度
const getElRect = (elClass, dataVal) => {
  new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery().in(this);
    query
        .select("." + elClass)
        .fields(
            {
              size: true,
            },
            (res) => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  getElRect(elClass);
                }, 10);
                return;
              }
              [dataVal].value = res.height;
              resolve();
            },
        )
        .exec();
  });
};
// 设置左边菜单的滚动状态
const leftMenuStatus = async (index) => {
  console.log("设置左边菜单的滚动状态", index);
  current.value = index;
  // 如果为0，意味着尚未初始化
  if (menuHeight.value == 0 || menuItemHeight.value == 0) {
    await getElRect("menu-scroll-view", "menuHeight");
    await getElRect("u-tab-item", "menuItemHeight");
  }
  // 将菜单活动item垂直居中
  scrollTop.value =
      index * menuItemHeight.value +
      menuItemHeight.value / 2 -
      menuHeight.value / 2;
  console.log("设置左边菜单的滚动状态scrollTop.value", scrollTop.value);
};

// 获取右边菜单每个item到顶部的距离
const getMenuItemTop = () => {
  new Promise((resolve) => {
    let selectorQuery = uni.createSelectorQuery();
    selectorQuery
        .selectAll(".class-item")
        .boundingClientRect((rects) => {
          // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
          if (!rects.length) {
            setTimeout(() => {
              getMenuItemTop();
            }, 10);
            return;
          }
          rects.forEach((rect) => {
            // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
            arr.value.push(rect.top - rects[0].top);
            console.log("arr.value", arr.value);
            resolve();
          });
        })
        .exec();
  });
};

// 右边菜单滚动
const rightScroll = async (e) => {
  oldScrollTop.value = e.detail.scrollTop;
  if (arr.value.length == 0) {
    await getMenuItemTop();
  }
  if (timer.value) return;
  if (!menuHeight.value) {
    await getElRect("menu-scroll-view", "menuHeight");
  }
  setTimeout(() => {
    // 节流
    timer.value = null;
    // scrollHeight为右边菜单垂直中点位置
    let scrollHeight = e.detail.scrollTop + menuHeight.value / 2;
    for (let i = 0; i < arr.value.length; i++) {
      let height1 = arr.value[i];
      let height2 = arr.value[i + 1];
      // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
      if (!height2 || (scrollHeight >= height1 && scrollHeight < height2)) {
        leftMenuStatus(i);
        return;
      }
    }
  }, 10);
};

</script>

<template>
  <view class="main">
    <view class="u-menu-wrap content">
      <scroll-view
        scroll-y
        scroll-with-animation
        class="u-tab-view menu-scroll-view"
        :scroll-top="scrollTop"
        :scroll-into-view="itemId"
      >
        <view
          v-for="(item, index) in tabbar"
          :key="index"
          class="u-tab-item"
          :class="[current == index ? 'u-tab-item-active' : '']"
          @tap.stop="swichMenu(index)"
        >
          <text class="u-line-1">{{ item.name }}</text>
        </view>
      </scroll-view>
      <scroll-view
        :scroll-top="scrollRightTop"
        scroll-y
        scroll-with-animation
        class="right-box goods"
        @scroll="rightScroll"
      >
        <view class="page-view wrapper">
          <swiper
            class="ads"
            id="ads"
            autoplay
            :interval="3000"
            indicator-dots>
            <swiper-item v-for="(item, index) in ads" :key="index">
              <image :src="item.image"></image>
            </swiper-item>
          </swiper>
          <view class="list">
            <view
              class="class-item category"
              :id="'item' + index"
              v-for="(item, index) in tabbar"
              :key="index"
            >
              <view class="title">
                <text>{{ item.name }}</text>
                <image :src="item.icon" class="icon"></image>
              </view>
              <view class="item-container items">
                <GoodItem
                    v-for="(good, index1) in item.goods"
                    :item="item"
                    :good="good"
                    @handleAddToCart="handleAddToCart"
                    @handleReduceFromCart="handleReduceFromCart"
                    @showGoodDetailModal="showGoodDetailModal"
                ></GoodItem>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 商品详情模态框 begin -->
    <ShopDetail :show="goodDetailModalVisible" :goodsInfo="goodsInfo" @close="closeGoodDetailModal"
                @confirm="handleAddToCartInModal"></ShopDetail>
    <!-- 商品详情模态框 end -->
  </view>
</template>

<style lang="scss" scoped>
.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.u-tab-view {
  width: 200rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  background: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #444;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #000;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-tab-item-active::before {
  content: "";
  position: absolute;
  border-left: 4px solid $u-warning;
  height: 32rpx;
  left: 0;
  top: 39rpx;
}

.u-tab-view {
  height: 100%;
}

.right-box {
  background-color: rgb(250, 250, 250);
}

.class-item {
  background-color: #fff;
  border-radius: 8rpx;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.item-menu-name {
  font-weight: normal;
  font-size: 24rpx;
  color: $u-main-color;
}

.item-menu-image {
  width: 120rpx;
  height: 120rpx
}

.container {
  overflow: hidden;
  position: relative;
}


.main {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  overflow: hidden;
  width: 100%;
  display: flex;
  min-height: 100vh;

  .menus {
    width: 200rpx;
    height: 100%;
    overflow: hidden;
    background-color: $uni-bg-color-grey;

    .wrapper {
      width: 100%;
      height: 100%;

      .menu {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 30rpx 20rpx;
        font-size: 26rpx;
        color: $uni-text-color;
        position: relative;

        &:nth-last-child(1) {
          margin-bottom: 130rpx;
        }

        &.current {
          background-color: #ffffff;
          color: $uni-text-color;
        }

        .dot {
          position: absolute;
          width: 34rpx;
          height: 34rpx;
          line-height: 34rpx;
          font-size: 22rpx;
          background-color: $uni-color-primary;
          color: #ffffff;
          top: 16rpx;
          right: 10rpx;
          border-radius: 100%;
          text-align: center;
        }
      }
    }
  }

  .goods {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;

    .wrapper {
      width: 100%;
      height: 100%;
      padding: 20rpx;

      .ads {
        height: calc(300 / 550 * 510rpx);

        image {
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
        }
      }

      .list {
        width: 100%;
        //font-size: $uni-font-size-base;
        padding-bottom: 190rpx;

        .category {
          width: 100%;

          .title {
            padding: 30rpx 0;
            display: flex;
            align-items: center;
            color: $uni-text-color;

            .icon {
              width: 38rpx;
              height: 38rpx;
              margin-left: 10rpx;
            }
          }
        }

        .items {
          display: flex;
          flex-direction: column;
          padding-bottom: -30rpx;

        }
      }
    }
  }


}
</style>